(公開日2023年08月25日)

企業の営業・マーケティング担当者ならびに個人事業主の方に向けて記事を書いています。顧客に情報を提供するため、メルマガやHTMLメールを配信されている方は多くいるでしょう。そしておしゃれにデザインされたレイアウトをご希望の方は少なくないはずです。

この記事では、マルチデバイスに対応するメルマガのレイアウト、レイアウトをおしゃれにデザインするコツを解説します。またおしゃれにレイアウトされたメルマガテンプレートを2つご紹介します。メルマガを配信する際に役立ててみてください。

メルマガはさまざまなデバイスで受信されるため、それに対応できるレイアウトが必要です。そこで以下の4種類のレイアウトをおすすめします。

・テーブルレイアウト・レスポンシブレイアウト・リキッドレイアウト・フレキシブルレイアウト

テーブルレイアウトは、基本的なテーブル（表）の中にさらにテーブルを入れ、その隣に他のテーブルを入れるといった、テーブルを入れ子状態にするレイアウトです。テーブルの列幅を固定でき、高さは自動計算されます。

列幅を固定（fixed）にしておけば、HTMLだけで基本構造が決まり、ブラウザ表示モードによる影響をあまり受けません。レイアウトが崩れることが少なく、さまざまな受信環境で表示されるメルマガのデザインに最適です。

以下のCSSでスタイルを指定します。

.style { table-layout: fixed;}・fixed：テーブルの列幅を固定・auto：テーブルの列幅を自動計算

デバイスの横幅に応じてCSSを切り替えるレイアウトです。ブレイクポイントを境にレイアウトが変わります。たとえば画面の幅が〜480pxの場合はこのレイアウト、480px〜の場合はこのレイアウトと指定する具合です。

ブレイクポイントを480pxに設定しておけば、スマートフォン対応のCSSと、それ以外のデバイス対応のCSSを使い分けられます。たとえば以下のようなCSSです。

@media only screen and (max-width: 480px) {.sp_hide {display: none !important;}}

スマートフォンで見る際には、sp_hideの要素が表示されない設定です。

メールクライアントの画面サイズに応じて、メルマガの横幅を自動的に変えるレイアウトです。HTML要素を%で表示します。たとえばスマートフォンを対象として、メルマガの横幅を100%に設定すれば、どのようなスマートフォンであれ、常に画面幅にフィットしたメルマガが表示される仕組みです。

CSSの事例を示します。

@media only screen and (max-width: 480px) {#design_area_result {width: 100% !important;}}

HTMLではdesign_area_resultの要素が幅700pxに指定されていますが、スマートフォンでは100%表示されます。

リキッドレイアウトと同様にHTML要素を%で表示しますが、さらに最小幅と最大幅を指定する方法です。たとえばパソコンのメールクライアントを対象として、メルマガの横幅を100%、最大横幅を700pxにすると、画面が広くなってもメルマガの横幅は700pxを超えることはありません。700pxを超えた範囲は余白で表示されます。

事例を示します。

.cm-left {width: 100%;max-width: 700px;)

ただしこのレイアウトに対応していないメールクライアントがあるため、多用しないほうがよいでしょう。

以下の4つのコツを守ってレイアウトをデザインしてください。

・テーブルレイアウトを基本にする・モバイルフレンドリーなデザインにする・空白を十分にとる・必要な画像のみを挿入する・全体のボリュームは少なめに

メールクライアントとデバイスの組み合わせは何百種類もあります。機能もさまざまで、最新のHTML/CSSに適応していないケースが多く、レイアウトが崩れることが少なくありません。特に画像を横並びにすると、ちゃんと表示されないことがあります。

対策として表示モードの影響を受けにくいテーブルレイアウトを基本にコーディングするとよいでしょう。何行何列のテーブルかを決め、列幅を指定すれば、まず崩れることはありません。

ADGBEHCFI

これを表示したのが以下の画像です。

テーブルレイアウトを基本にして、レスポンシブレイアウト、リキッドレイアウト、フレキシブルレイアウトを補助的に用いるとよいでしょう。

最近ではメルマガをスマートフォンで受信するユーザーが増えています。そのためスマートフォンで見るのに向いた（モバイルフレンドリーな）デザインにするのが主流です。デベロッパーツールなどを使い、スマートフォンで見た時のデザインを確認しながらデザインしてください。

ただしテーブルレイアウトは、パソコンの画面でないとコーディングできません。まずパソコン向けのデザインをコーディングしてコーディングした後で、モバイル向けにレイアウトをアレンジしてください。

メールコンテンツのセクションの間に空白（余白）を十分にとることは大切です。白色はデザインの背景色として重要な色であり、見せたい要素を強調します。余白があるとメルマガが整理されているように見えて読みやすいのもメリットです。

画像引用元：photoAC – カラフルなアイスクリーム

読者の目を引き、情報を伝えるのに画像は効果的です。ただし枚数が増えて容量が大きくなると、表示できなくなる点に注意してください。きちんとした高画質の画像を厳選して載せるとよいでしょう。ユーモアのある動きで目を引きつけるGIFアニメーションがおすすめです。

メール全体が長すぎると読者が読みづらくなります。ですから3スクロール以内で読み切れるボリュームにするとよいでしょう。メルマガのテーマを2〜3個に絞り、ボリュームを少なくして読みやすいメルマガにしてください。

・レイアウトが崩れないようにする・テストメールをチェックする

HTMLメールを使ったメルマガは、受信環境によっては表示が崩れることがあります。表がズレたり、画像・動画が正しく表示されないなどです。最新のHTML/CSSを使ったflexboxレイアウトなどは全く活用できません。

表示の崩れを防ぐために、テーブルレイアウトを用いるのが基本です。しかもコーディングする際に、埋め込み型CSS、インラインCSSといった特殊なスキルが必要です。HTMLメールのコーディングはウェブサイトのコーディングとは別物とみなされます。

HTMLメールを使ったメルマガが正しく表示されるかどうか、さまざまなデバイス・メールクライアントを対象にメールを送りテストすることが必要です。とはいえデバイスにはiPhone、Android、iPad、パソコンなどがあり、バージョンや含まれるメールクライアントも多種多様です。手動でテストメールをチェックするのは不可能でしょう。

HTMLメールの表示確認をするオンラインツールがありますから利用してください。

・Email on Acid・Litmus・MailChimp

メルマガのテンプレートを２つご紹介します。

・2カラムのレスポンシブレイアウト・GIFアニメーションのついたテンプレート

メルマガの